<template>
  <div class="fixed-top">
    <div class="flex-between-top p-xs" style="box-shadow: 0 0 10px #eee">
      <div class="color-grey" style="background-color: #fff; line-height: 27px">总计数量：{{ countNum }}</div>
      <div class="flex-center-end-column" style="flex: 1">
        <stastics :timeType="queryData.timeType" :earliest-time="earliestTime" @change="handleChangeDate" />
      </div>
    </div>
  </div>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="margin-top: 84px">
    <van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad">
      <rank-list :list="dataList" @detail="toDetail" />
    </van-list>
    <van-empty v-if="!dataList.length" description="暂无数据" />
  </van-pull-refresh>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { getQuotationRankList } from '@/api/ranking'
import { reactive, toRefs, onBeforeMount } from 'vue'
import Stastics from './components/stastics.vue'
import RankList from './components/rankList.vue'
export default {
  name: 'quotationRank',
  components: { Stastics, RankList },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      earliestTime: '',
      queryData: {
        quotationStatus: 'YBJ',
        timeType: '',
        current: 1,
        size: 1000
      },
      loading: false,
      disabled: false,
      finished: false,
      refreshing: false,
      hasNextPage: false,
      total: 0,
      countNum: 0,
      dataList: []
    })
    const toDetail = (id) => {
      router.replace({ path: '/businessOpportunity', query: { active: 'business',salerId:id,status:state.queryData.quotationStatus } })
    }
    const handleChangeDate = (type) => {
      state.queryData.timeType = type
      onSearch()
    }
    const getList = () => {
      getQuotationRankList(state.queryData)
        .then((res) => {
          if (state.refreshing) {
            state.dataList = []
            state.refreshing = false
          }
          const { records, total,countNum } = res
          state.hasNextPage = false
          state.dataList = records
          state.total = total
          state.countNum = countNum
          state.finished = !state.hasNextPage
        })
        .catch(() => {
          state.refreshing = false
          state.finished = true
        })
    }
    const onSearch = () => {
      getList()
    }

    const onLoad = () => {
      if (state.hasNextPage) {
        state.queryData.current++
        getList()
      }
    }
    // 下拉刷新
    const onRefresh = () => {
      // 清空列表数据
      state.finished = false
      state.dataList = []

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // state.loading = true
      state.queryData.current = 1
      state.hasNextPage = false
      getList()
    }

    onBeforeMount(() => {
      const { timeType, ownerUserId } = route.query
      if (timeType) {
        state.queryData.timeType = timeType
      }
      if (ownerUserId) {
        state.queryData.ownerUserId = ownerUserId
      }
      getList()
    })

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      handleChangeDate,
      toDetail
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.van-dropdown-menu__bar) {
  box-shadow: none;
  border: 1px solid #eee;
  height: 25px;
}
</style>
